<style scoped>
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar {
  width: 30px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
</style>
<template>
  <v-coreLayout ref="coreLayout" :step="1" :countdownTime="300">
    <template slot="content">
      <v-exception ref="exceptionModel"></v-exception>
      <v-preProcessModel ref="preProcessModel"></v-preProcessModel>
      <Row style="height: 100%" type="flex">
        <Col span="24" style="display:flex;justify-content:flex-start;flex-direction:column;padding-left: 90px;padding-right: 90px;padding-top:40px;">
        <Card :bordered="false" style="margin-bottom: 40px">
          <p slot="title">磁盘文件夹列表（共发现{{roots.length}}个磁盘）</p>
          <div v-for="root in roots" :key="root" style="text-align:center;margin: 5px;min-width: 100px;max-width: 100px;">
            <a v-on:click="getFileList(root,'Directory','')">
              <img src="../images/usb.svg" width="50px" />
              <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; white-space: normal !important;">
                {{ root }}
              </p>
            </a>
          </div>
        </Card>

        <Card :bordered="false" style="margin-bottom: 40px">
          <p slot="title">当前磁盘路径：<span style="color:#2d8cf0;">{{pathTemp[pathTemp.length-1]}}</span></p>
          <CheckboxGroup v-model="checkedFile" class="scrollbar" style="display: flex;flex-direction:row;align-content: flex-start;flex-wrap:wrap;max-height: 300px;overflow: auto">
            <Poptip :content="file.fileName" title="文件名 / Name" word-wrap width="140" v-for="file in files" :key="file.fileName">

              <div style="text-align:center;height: 100px;overflow:hidden;margin: 5px;min-width: 120px;max-width: 120px;">
                <Checkbox v-if="file.fileType!='Directory'&&file.fileType!='Top-Level'" :label="file.fileName" @click.prevent.native="getFileList(file.filePath,file.fileType,file.fileName)" :disabled="chooseFileState=='initMode'?
                                                  false:(chooseFileState=='picChooseMode'&(file.fileType=='png'||file.fileType=='jpg')?false:true)">
                  <img :src="file.fileIcon" width="50px" />
                </Checkbox>
                <a v-on:click="getFileList(file.filePath,file.fileType,file.fileName)">
                  <img :src="file.fileIcon" width="50px" style="margin-bottom: 5px" v-if="file.fileType=='Directory'||file.fileType=='Top-Level'" />
                  <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; white-space: normal !important;">
                    {{file.fileName }}
                  </p>
                </a>
              </div>

            </Poptip>
          </CheckboxGroup>
        </Card>

        <div style="display:flex;flex-direction:column;align-items: center;">
          <Button @click="chooseFile" :loading="loading" type="success" size="large" icon="md-print" style="width: 340px;margin-top: 20px;height: 45px;">
            <p style="font-size: 18px;" v-if="!loading">确认打印文件 / Confirm Print File</p>
            <p style="font-size: 18px;" v-else>预处理中...</p>
          </Button>
        </div>
        </Col>
      </Row>
    </template>
  </v-coreLayout>
</template>
<script>
import * as axios from "axios";
import ExceptionModel from "../components/ExceptionModel.vue";
import CountdownButton from "../components/CountdownButton.vue";
import PreProcessModel from "../components/PreProcessModel.vue";
import CoreLayout from "../components/CoreLayout.vue";

export default {
  components: {
    "v-exception": ExceptionModel,
    "v-countdownButton": CountdownButton,
    "v-preProcessModel": PreProcessModel,
    "v-coreLayout": CoreLayout,
  },
  data() {
    return {
      loading: false,
      contentHeight: {
        height: `${document.documentElement.clientHeight}` - 300 + "px",
        overflowY: "scroll",
      },
      path: this.$route.params.roots[0],
      roots: this.$route.params.roots,
      files: [],
      pathTemp: [],
      checkedFile: [],
      checkedFileType: null,
      checkedFilePath: [],
      chooseFileState: "initMode",
      rootPath: null,
    };
  },
  mounted() {
    this.getFileList(this.path, "Directory");
    this.rootPath = this.pathTemp[0];
  },
  methods: {
    getFileList(path, type, name) {
      if (type == "Directory") {
        this.pathTemp.push(path);
        this.files.splice(0, this.files.length);
        axios({
          method: "get",
          url: "http://localhost:8999/getFiles",
          params: {
            path: path,
          },
        })
          .then((response) => {
            let responseData = response.data;
            if (responseData.state == "SUCCESS") {
              if (path != this.rootPath) {
                let fileInfo = {
                  fileIcon: require("../images/folder.svg"),
                  fileName: "...",
                  filePath: "",
                  fileType: "Top-Level",
                };
                this.files.push(fileInfo);
              }

              let fileList = JSON.parse(responseData.msg);
              for (let i in fileList) {
                let fileInfo = {
                  fileIcon: this.getFileIcon(fileList[i]["fileType"]),
                  fileName: fileList[i]["fileName"],
                  filePath: fileList[i]["filePath"],
                  fileType: fileList[i]["fileType"],
                };
                this.files.push(fileInfo);
              }
            } else {
              this.$refs.exceptionModel.openExceptionModel(
                this.$root.printUserMark,
                responseData.msg,
                responseData.code,
                responseData.state
              );
            }
          })
          .catch((reason) => {
            this.$refs.exceptionModel.openExceptionModel(
              this.$root.printUserMark,
              reason.toString()
            );
          });
      } else if (type == "Top-Level") {
        if (
          this.pathTemp[this.pathTemp.length - 1] !== undefined &&
          this.pathTemp[this.pathTemp.length - 1] !== "" &&
          this.rootPath !== path
        ) {
          this.pathTemp.pop();
          path = this.pathTemp.pop();
          if (path !== undefined) {
            this.getFileList(path, "Directory");
          }
        }
      } else {
        if (this.checkedFile.includes(name)) {
          this.checkedFile.splice(this.checkedFile.indexOf(name), 1);
          this.checkedFilePath.splice(this.checkedFilePath.indexOf(path), 1);
          if (this.checkedFile.length == 0) {
            this.checkedFileType = null;
            this.chooseFileState = "initMode";
          }
        } else {
          if (
            (this.checkedFileType == "jpg") |
              (this.checkedFileType == "png") |
              (this.checkedFileType == null) &&
            (type == "jpg") | (type == "png")
          ) {
            this.chooseFileState = "picChooseMode";
            this.checkedFile.push(name);
            this.checkedFileType = type;
            this.checkedFilePath.push(path);
          } else {
            if (this.checkedFile.length > 0) {
              this.$Notice.error({
                title: "最多选择一个非图片的文档",
                desc: "除图片外，不可多选打印的文档，请逐份打印！",
              });
            } else {
              this.chooseFileState = "normalChooseMode";
              this.checkedFile.push(name);
              this.checkedFileType = type;
              this.checkedFilePath.push(path);
            }
          }
        }
      }
    },
    chooseFile() {
      if (this.checkedFile.length > 0) {
        this.loading = true;
        this.$refs.preProcessModel.fileProcessing(
          this,
          this.checkedFilePath,
          this.checkedFileType
        );
      } else {
        this.$Notice.error({
          title: "必须选择需要打印的文件",
        });
      }
    },
    getFileIcon(fileType) {
      switch (fileType) {
        case "doc":
          return require("../images/doc.svg");
        case "docx":
          return require("../images/doc.svg");
        case "ppt":
          return require("../images/ppt.svg");
        case "pptx":
          return require("../images/ppt.svg");
        case "xls":
          return require("../images/xls.svg");
        case "xlsx":
          return require("../images/xls.svg");
        case "jpg":
          return require("../images/jpg.svg");
        case "png":
          return require("../images/png.svg");
        case "pdf":
          return require("../images/pdf.svg");
        case "Directory":
          return require("../images/folder.svg");
      }
    },
  },
};
</script>